<?php 
	use Zend\Session\Container; 
    $SESSION = new Container('user');
	$jsonData="{'items':[";
	$nbsp=" ";
	foreach($SESSION['data']['infoCdrs'] as $data){ 
		$jsonData=$jsonData."'<table width=100%><tr><td width=18%>".$data['calleeE164']."</td><td width=20%>".$data['feeTime']."</td><td width=17%>".$data['fee']."</td><td width=25%>".$data['start']."</td><td width=0%>".$data['stop']."</td></tr></table>',"; 
	}
	$jsonData=trim($jsonData,','); 
	$jsonData=$jsonData."]}"; 
	$jsonData = str_replace("'", '"', $jsonData);
?>
<!DOCTYPE html>
<html>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
	<style type="text/css">
	a.disabled {
		text-decoration: none;
		color: black;
		cursor: default;
	}
	 #example4,
	 #example4-pagination {
		display: none;
	}
	
	</style>
	
<body>

<!--CONTENT SECTION START-->

<div id="main-wrapper-sec">

<section>

	<!--INNER MAIN TITLE SECTION START-->

    <h2 class="inner-main-title pr-title">login</h2>
    
    <!--INNER MAIN TITLE SECTION END-->
    
    <!--CONTENT MAIN SECTION START-->
    
  <div class="content-main-sec cd-main-sec">
  
  <!--INNER CONTENT LEFT MENU SECTION START-->
  
  <ul class="inner-left-menu-sec">
    <?php include('leftmenu.phtml');?>
  </ul>
  
  <!--INNER CONTENT LEFT MENU SECTION END-->
  
  <!--INNER CONTENT RIGHT SECTION START-->
  
  <article class="inner-cont-right-sec">
  
  <h1 class="inner-cont-title">Call Details
  <strong><img src="<?php echo $this->basePath(); ?>/images/phone-icon.png" alt="">Call Detail Records</strong>
  </h1>
  
  <div class="clear"></div>
  
  <!--CALL DETAILS CONTENT MAIN SECTION START-->
  
  <ul class="login-form-sec">
  <li>
  <div class="from-date-sec"><span class="display">From:</span>
  <input class="input_w" type="text" id="datepicker"/>
  </div>
  
  <div class="to-date-sec"><span class="display">To:</span>
 <input class="input_w" type="text" id="datepicker_to"/>
  </div>
   <div class="by-country-sec"><span class="display">By Timezone</span>
  <select name="">
 <option>Asia/Kolkatta IST 5:30</option>
  </select>
  </div>
  </li>
  </ul>
  
  <div class="clear"></div>
  
  <!--CALL RATES DETIALS TABLE SECTION START-->
  
  <div class="cd-sf-sec">
  <table cellpadding="0" cellspacing="0" border="0" width="100%" >
		<tr class="title">
		  <td>Number</td>
		  <td>Duration</td>
		  <td>Charge</td>
		  <td>Called Time</td>
		  <td>End Time</td>
		</tr>
	</table>
	<table cellpadding="0" cellspacing="0" border="0" width="100%" id="example4" >
	</table>
  </div>
  <div class="clear"></div>
  <div id="example4-pagination" style="margin:0px 0px 0px 0px;">
        <a id="example4-previous" href="#">&laquo; Previous</a>
		
		<?php if(isset( $SESSION['count'])){ $j=ceil($SESSION['count']/10); for($i=1;$i<=$j;$i++){ ?>
			<a id="example4-numbers"<?php //echo $i; ?> href="#"><?php echo $i;echo " "; ?> </a>
		<?php } } ?>
		
        <a id="example4-next" href="#">Next &raquo;</a> 
   </div>
  <!--CALL RATES DETIALS TABLE SECTION END-->
  <div class="clear"></div>
  
  </article>
  
  <!--INNER CONTENT RIGHT SECTION END-->
  
  </div>
  
  <!--CONTENT MAIN SECTION END-->
  
  <div class="clear"></div>
  
  <!--CLIENTS AREA SECTION START-->
  
  <aside class="content-main-sec ot-lg-sec"> <img src="<?php echo $this->basePath(); ?>/images/truste.jpg" alt=""> <img src="<?php echo $this->basePath(); ?>/images/secured.jpg" alt=""> <img src="<?php echo $this->basePath(); ?>/images/mcafeev.jpg" alt="">
    <h3 class="otg-title">Trusted. Safe. Reliable.</h3>
  </aside>
  
  <!--CLIENTS AREA SECTION END-->
  
  <div class="clear"></div>
  
  </section>

</div>

<!--CONTENT SECTION END--> 

</body>
</html>

<!--script start --> 
	<script type="text/javascript">
		$(document).ready(function(){
				var data=<?php echo $jsonData; ?>;
				var items = [];
				$.each(data.items, function(i, item) {
					items.push('<li id="ram">' + item + '</li>');
				});
				$('#example4').append(items.join(''));
				$('#example4').paginate({itemsPerPage: 10});
		});
	</script>
	
<!-- script END--> 